<template>
  <!-- 我的页面 头部组件 -->
  <div class="mine-header">
    <div class="user-header">
      <div class="header-l">
        <label class="l-avatar" for="uploadAvatar">
          <img ref="avatar" :src="userInfo.avatarURL || defaultIcon" alt="" />
          <i class="el-icon-camera camera"></i>
          <input
            type="file"
            accept="image/*"
            hidden
            ref="uploadAvatar"
            id="uploadAvatar"
            @input="uploadAvatar"
          />
        </label>
        <div class="l-info" :class="isVip ? 'vip' : ''">
          <div class="info-name">{{ userInfo.name }}</div>
          <div class="info-vip">
            {{ isVip ? "星级会员" : "普通用户" }}
            <a class="open-vip" @click.prevent="openVip()" v-show="!isVip"
              >开通会员</a
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
export default {
  name: "MineHeader",
  methods: {
    ...mapActions("user", ["openVip"]),
    ...mapMutations("user", ["EDITUSERINFO"]),
    uploadAvatar() {
      const img = this.$refs["avatar"];
      const file = this.$refs["uploadAvatar"]["files"][0];
      const blob = new Blob([file], { type: "audio/mpeg" }); // 指定转换成blob的类型
      img["src"] = URL.createObjectURL(blob); //转为本地临时链接
      this.EDITUSERINFO({ avatarURL: img["src"] });
      this.$message({ message: "上传成功！", type: "success" });
    },
  },
  computed: {
    ...mapState("user", ["userInfo", "defaultIcon"]),
    ...mapGetters("user", ["isVip"]),
  },
};
</script>

<style lang="less" scoped>
.mine-header {
  position: relative;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  background: #333333;
  padding: 0.5rem 0;

  .user-header {
    display: flex;
    align-items: center;
    justify-content: center;

    .header-l {
      display: flex;
      flex-direction: column;
      align-items: center;
      .l-info {
        margin-top: 0.1rem;
        &.vip {
          background: #e65c00; /* fallback for old browsers */
          background: -webkit-linear-gradient(
            to right,
            #f9d423,
            #e65c00
          ); /* Chrome 10-25, Safari 5.1-6 */
          background: linear-gradient(
            to right,
            #f9d423,
            #e65c00
          ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
          -webkit-background-clip: text;

          -webkit-text-fill-color: transparent;
        }
        .info-name,
        .info-vip {
          display: flex;
          justify-content: center;
          margin: 0.1rem 0;
          font-size: 0.3rem;

          .open-vip {
            margin-left: 0.1rem;
            background: #e65c00; /* fallback for old browsers */
            background: -webkit-linear-gradient(
              to right,
              #f9d423,
              #e65c00
            ); /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(
              to right,
              #f9d423,
              #e65c00
            ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;
          }
        }
      }
      .l-avatar {
        height: 2rem;
        width: 2rem;
        overflow: hidden;
        border-radius: 50%;
        border: 0.05rem solid rgb(255, 255, 255);
        position: relative;
        cursor: pointer;
        &:hover {
          img {
            opacity: 0.3;
          }
          .camera {
            display: block;
          }
        }
        .camera {
          position: absolute;
          z-index: 10;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 0.8rem;
          display: none;
        }
        img {
          height: 100%;
          width: 100%;
        }
      }
    }
  }
}
</style>